<template>
  <!-- 使用自定义表单布局替换原有的el-form -->
  <div class="custom-form">
    <div class="form-item">
      <label style="width: 80px">试卷标题</label>
      <el-input v-model="form.title" placeholder="请输入试卷标题" />
    </div>
    <div class="form-item">
      <label style="width: 80px">交卷时间</label>
      <el-date-picker
        v-model="form.time"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="YYYY-MM-DDTHH:mm"
      />
    </div>
    <div class="form-item buttons">
      <el-button type="primary" @click="confirm" icon="Select">确认</el-button>
      <el-button type="info" @click="reset" icon="Refresh">重置</el-button>
    </div>
  </div>

  <el-card
    v-for="item in tableData"
    :key="item.id"
    header="考卷信息"
    style="margin-bottom: 20px; overflow-x: auto"
  >
    <div
      style="display: flex; flex-direction: row; justify-content: space-between"
    >
      <div style="display: flex; flex-direction: row">
        <div style="width: 350px">
          <span>试卷标题：{{ item.title }}</span>
          <span>题目数量：{{ item.testCount }}</span>
          <span>考试科目：{{ item.subjectName }}</span>
        </div>
        <div style="width: 300px">
          <span>创建时间：{{ item.createTime?.replace("T", " ") }}</span>
          <span>总计用时：{{ item.usedTime }}</span>
          <span>得分：{{ item.score }}</span>
        </div>
      </div>
      <div class="start-exam-button" @click="getMyExam(item)">
        <el-icon><Management /></el-icon>
        查看试卷
      </div>
    </div>
  </el-card>

  <el-pagination
    background
    layout="prev, pager, next"
    :total="total"
    v-model:current-page="currentPage"
    @current-change="handleCurrentChange"
  />
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElDatePicker } from "element-plus";
import testResultApi from "@/api/questionItem/testResult";

const router = useRouter();
const route = useRoute();

// 响应式数据
const form = reactive({
  title: route.query.title || "",
  time: "",
});
const tableData = ref([]);
const currentPage = ref(1);
const total = ref(0);
const pageSize = 5;

const dateFormatter = (data) => {
  console.log(data);
};

// 方法集
const getMyExam = (data) => {
  router.push({
    path: "/test/answer",
    query: {
      questionItemId: data.questionItemId,
      account: data.account,
    },
  });
};

const handleCurrentChange = (newPage) => {
  currentPage.value = newPage;
  list();
};

const list = async () => {
  const res = await testResultApi.getList(form, currentPage.value, pageSize);
  tableData.value = res.data;
};

const getTotal = async () => {
  const res = await testResultApi.getTotal(form);
  total.value = res.data;
};

const confirm = async () => {
  tableData.value = [];
  total.value = 0;
  await getTotal();
  await list();
};

const reset = () => {
  form.title = "";
  form.time = "";
};

// 生命周期
onMounted(async () => {
  await list();
  await getTotal();
});
</script>

<style scoped>
span {
  display: block;
}

.start-exam-button {
  min-width: 100px;
  height: 30px;
  background-color: rgb(64, 158, 255);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 5px;
  color: white;
  font-size: 14px;
  margin-top: 60px;
}

.start-exam-button:hover {
  background-color: rgb(64, 191, 214);
  cursor: pointer;
}

/* 添加自定义表单样式 */
.custom-form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 20px;
  border-radius: 4px;
  margin-bottom: 20px;
  background-color: #f5f7fa;
}

.form-item {
  display: flex;
  align-items: center;
  margin-right: 20px;
  margin-bottom: 10px;
}

.form-item label {
  margin-right: 8px;
  font-size: 14px;
  color: #606266;
}

.buttons {
  display: flex;
  gap: 10px;
}
</style>
